<template>
  <div class="student-item-wrapper">
    <div class="student-item-title">
      <span>序号</span>
      <span>姓名</span>
      <span>年龄</span>
      <span>专业</span>
    </div>
    <div class="student-item-content">
      <span>{{ props.index }}</span>
      <span>{{ props.name }}</span>
      <span>{{ props.age }}</span>
      <span>{{ props.major }}</span>
    </div>

  </div>
  <div>
    
  </div>

</template>

<script lang="js" setup name="StudentItem">
import { defineProps } from 'vue'


const props = defineProps({
  index:{
    type:Number,required:false,default:1},
  name:String,
  age:Number,
  major:String
})
console.log(props)
</script>

<style lang="css">
.student-item-wrapper {
  border: 1px dashed #f4ff95;
  height: 50px;
  width: auto;
}

span {
  margin: 30px;
  padding: 20px;
  overflow: hidden;
}

.student-item-content {
  margin: 0 20px;
}

</style>